<!--navbar-->
<div class="navbar">
    <div class="navbar-inner service-detail-navbar-inner row" style="background-color: #fff">
        <div class="left service-detail-previous col-10" onclick="history.back(-1)">
            <span><i class="f7-icons size-16">left</i></span>
        </div>
        <div class="center service-detail-tab col-80">
            <ul class="row">
                <li class="bannerServiceDetail col-25 active"><a href="#bannerServiceDetail">服务</a></li>
                <li class="serviceDetails col-25"><a href="#serviceDetails">详情</a></li>
                <li class="evaluationBox col-25"><a href="#evaluationBox">评价</a></li>
                <li class="customLogo col-25"><a href="#customLogo">定制</a></li>
            </ul>
        </div>
        <div class="right service-detail-menu col-10">
            <div>
                <span class="menu-icon"></span>
                <ul class="service-detail-menu-list">
                    <li class="home"><a href=""><span></span>首页</a></li>
                    <li class="msg"><a href=""><span></span>消息</a></li>
                    <li class="share"><a href=""><span></span>分享</a></li>
                    <li class="search"><a href=""><span></span>搜索</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Page, data-page contains page name-->
<div data-page="page.serviceDetail.index" class="page navbar-through no-toolbar">
    <div class="page-content service-detail-scroll">
        <div class="service-detail-top-box">
            <!--服务详情页banner滚动-->
            <figure id="banner-service-detail" class="swipslider-banner-service-detail">
                <ul class="sw-slides">
                    <!--后台读取start-->
                    {{#each d.service_cover}}
                    <li class="sw-slide">
                        <img src="{{this}}" alt="">
                    </li>
                    {{/each}} 
                    <!--<li class="sw-slide">-->
                    <!--    <img src="app/images/banner-service-detail.jpg" alt="">-->
                    <!--</li>-->
                    <!--后台读取end-->
                </ul>
            </figure>
            <p class="title">{{d.shop_buyservice.service.title}}</p>
            <p class="price">￥{{d.shop_buyservice.service.cash}} </p>
            <ul class="three-box row no-gutter">
                <li class="col-33"><p><span class="num">5</span>天</p>
                    <p>平均完成时间</p></li>
                <li class="col-33"><p><span class="num">8888</span></p>
                    <p>总计销量</p></li>
                <li class="col-33"><p><span class="num">1130</span></p>
                    <p>收藏量</p></li>
            </ul>
            <!--诚信保证金-->
            <a class="credit-bar row">
                <div class="info col-90">
                    <p>已缴纳诚信保证金12000.00元，交易出问题先行赔付</p>
                    <p class="ensure"><span>保证完成</span><span>保证质量</span><span>保证维护</span><span>保证源码</span></p>
                </div>
                <div class="arrow col-10">
                    <span></span>
                </div>
            </a>
        </div>
        <!--标题栏-->
        <div class="service-detail-info-box row no-gutter">
            <div class="col-20">
                <div class="img">
                    <img src="" alt="">
                </div>
            </div>
            <div class="col-80">
                <p class="title">一点品牌策划机构
                    <span class="personal"></span>
                    <span class="zhifubao"></span>
                    <span class="msg"></span>
                    <span class="telphone"></span>
                    <span class="other"></span>
                </p>
                <p class="second-line">
                    <span class="rate">好评率<span class="percent">99%</span></span>
                    <span class="deal">近三月成交 <span class="num">555单</span></span>
                    <span class="income">共计收入<span class="money">10000.00元</span></span>
                </p>
                <p class="three-line">
                    <span class="position-icon"></span>
                    <a class="address">山东省青岛市市南区 ></a>
                </p>
            </div>
        </div>
        <div class="service-detail-info-btn row no-gutter">
            <a href="" class="consulting-online col-50">
                <span></span>在线咨询
            </a>
            <a href="" class="enter-store col-50">
                <span></span>进入店铺
            </a>
        </div>
        <!--广告图片-->
        <div class="ad-img">
            <img src="app/images/service-detail-ad.jpg" alt="">
        </div>
        <!--详情-->
        <div class="service-details" id="service-details">
            <div class="details-title">
                <span class="label">详情</span>
            </div>
            <div class="details-content">
                {{d.shop_buyservice.service.desc}}
            </div>
        </div>
        <!--评价-->
        <div class="evaluation-box" id="evaluation-box">
            <div class="evaluation-title">
                <span class="label">评价</span><span class="number">(226条评价)</span>
                <a href="">查看更多&gt;&gt;</a>
            </div>
            <div class="evaluation-content">
                <ul class="label-ul">
                    <li>专业水平高</li>
                    <li>有创意</li>
                    <li>严谨认真</li>
                    <li>有创意</li>
                    <li>严谨认真</li>
                    <li>有创意</li>
                    <li>有创意</li>
                </ul>
                <ul class="evaluation-ul">
                    <li>
                        <p class="row">
                            <span class="name col-60">临江仙</span>
                            <span class="rate col-40">好评：<span class="star star5"></span></span>
                        </p>
                        <p class="content">
                            有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意
                        </p>
                    </li>
                    <li>
                        <p class="row">
                            <span class="name col-60">临江仙</span>
                            <span class="rate col-40">好评：<span class="star star4"></span></span>
                        </p>
                        <p class="content">
                            有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意
                        </p>
                    </li>
                    <li>
                        <p class="row">
                            <span class="name col-60">临江仙</span>
                            <span class="rate col-40">好评：<span class="star star3"></span></span>
                        </p>
                        <p class="content">
                            有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意有创意
                        </p>
                    </li>
                </ul>
                <a class="more-evaluation" href="">查看更多评价 &gt;&gt;</a>
            </div>
        </div>
        <!--定制logo服务-->
        <div class="custom-logo" id="custom-logo">
            <div class="custom-logo-title">
                <span class="label">定制LOGO服务</span>
            </div>
            <div class="custom-logo-content">
                <p class="intention-price">意向价格：<span>￥0</span></p>
                <form name="custom-logo-form" action="">
                    <input id="trackBar" type="range" step="1" min="400" max="1800" value="1100"/>
                    <div class="price-range row">
                        <span class="col-20">￥400</span>
                        <input type="text" class="col-60" id="trackBar-value" min="400" max="1800" placeholder="在此处输入您接受的价格，如：800">
                        <span class="col-20">￥1800</span>
                    </div>
                    <textarea name="desc-demand" class="desc-demand" placeholder="为方便您的定制，请简单描述需求（非必填）"></textarea>
                    <input type="submit" class="custom-logo-submit" value="提&nbsp;交">
                </form>
                <p class="custom-logo-bottom">该商铺已为999位客户提供定制化服务</p>
            </div>
        </div>

        <!--相关服务推荐-->
        <div class="services-recommend">
            <div class="services-recommend-title">
                <span class="label">相关服务推荐</span>
            </div>
            <!--列表4个start-->
            {{#each d.shop_buyservice.other_service}}
            <a href="" class="services-recommend-content row">
                <div class="img col-25">
                    <img src="{{cover}}" alt="">
                </div>
                <div class="info col-75">
                    <p class="info-title">{{title}}</p>
                    <p class="row">
                        <span class="price col-50">￥{{cash}}</span>
                        <span class="deal col-50">成交量{{sales_num}}</span>
                    </p>
                    <p>
                        <!--<span class="label">  </span>-->
                    </p>
                </div>
            </a>
            {{/each}}
            <!--<a href="" class="services-recommend-content row">-->
            <!--    <div class="img col-25">-->
            <!--        <img src="" alt="">-->
            <!--    </div>-->
            <!--    <div class="info col-75">-->
            <!--        <p class="info-title">【LOGO设计】公司企业公司企业品牌形象标志设计</p>-->
            <!--        <p class="row">-->
            <!--            <span class="price col-50">￥10000.00</span>-->
            <!--            <span class="deal col-50">成交量200</span>-->
            <!--        </p>-->
            <!--        <p>-->
            <!--            <span class="label">LOGO设计</span>-->
            <!--        </p>-->
            <!--    </div>-->
            <!--</a>-->
            <!--列表4个end-->
        </div>
        <p class="no-more">没有更多</p>
    </div>
    <div class="service-detail-toolbar tabbar tabbar-labels">
        <div class="toolbar-inner">
            <a href="" class="tab-link focus-store">
                <i class="icon focus-icon"></i>
                <span class="tabbar-label">关注店铺</span>
            </a>
            <a href="" class="tab-link consult-online">
                <i class="icon consult-icon"></i>
                <span class="tabbar-label">在线咨询</span>
            </a>
            <a href="" class="tab-link contact-him">
                <i class="icon contact-icon"></i>
                <span class="tabbar-label">联系TA</span>
            </a>
            <a href="" class="tab-link hire-him"> 
                <i class="icon hire-icon"></i>
                <span class="tabbar-label">雇佣TA</span>
            </a>
        </div>
    </div>

</div>